<template>
    <section>
        <el-col :span="24" style="padding: 18px 2px;">
            <el-button type="primary" icon="el-icon-circle-plus" round @click="newCard()">添加</el-button>
        </el-col>
        <div>
            <el-col class="monitor-card" v-for="(device, index) in cardData">
                <el-card class="monitor-box-card">
                    <div slot="header" class="clearfix">
                        <i class="el-icon-close" @click="delCard(device)" style="float: right; position: relative; top: -10px; right: -10px"></i>
                        <el-input v-model="device['name']" style="width: 75%"></el-input>
                        <el-switch
                                v-model="lightStatus[index]"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                style="margin-left: 12px;"
                                @change="changeWitch(index)"
                        >
                        </el-switch>
                    </div>
                    <div>
                        <span style="line-height: 38px; margin-left: 2px">亮度</span>
                        <el-slider v-model="device.value" style="width: 79%; float:right; margin-right: 10px"></el-slider>
                    </div>
                    <div>
                        <span style="line-height: 38px; margin-left: 2px">代号</span>
                        <el-input v-model="device.code" style="width: 83%; padding: 10px 0px; margin-left: 11px"></el-input>
                    </div>
                    <div>
                        <span style="line-height: 38px; margin-left: 2px">时间</span>
                        <template>
                            <el-time-select
                                    placeholder="开始"
                                    v-model="beginTime[index]"
                                    style = "width: 40%; padding: 15px 4px; margin-left: 7px"
                                    :picker-options="{
                                      start: '00:00',
                                      step: '00:15',
                                      end: '23:45'
                                    }">
                            </el-time-select>
                            <el-time-select
                                    placeholder="结束"
                                    v-model="endTime[index]"
                                    style = "width: 40%"
                                    :picker-options="{
                                      start: '00:00',
                                      step: '00:15',
                                      end: '23:45',
                                      minTime: beginTime[index]
                                    }">
                            </el-time-select>
                        </template>
                    </div>
                    <div>
                        <span style="line-height: 38px; margin-left: 2px">时效</span>
                        <el-time-select
                                v-model="delayTime[index]"
                                style="width: 83%; padding: 10px 0px; margin-left: 11px"
                                :picker-options="{
                                    start: '00:00',
                                    step: '00:05',
                                    end: '1:00'
                                }"
                                placeholder="持续时间">
                        </el-time-select>
                    </div>
                    <div>
                        <span style="line-height: 38px; margin-left: 2px">设备</span>
                        <el-select
                                v-model="deviceLists[index]"
                                multiple
                                collapse-tags
                                style="width: 83%; padding: 10px 0px; margin-left: 11px"
                                placeholder="请选择"
                                id="device_select"
                        >
                            <el-option
                                    v-for="item in devices"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                    <div style="padding: 25px 0px">
                        <el-button type="primary" icon="el-icon-edit" style="float:right; margin-right: 5px; width: 95%"
                                   @click="updateCard(index)">确认</el-button>
                    </div>
                </el-card>
            </el-col>
        </div>
    </section>
</template>

<style>
    .monitor-card {
        padding: 15px 4px;
        width: 335px
    }
    .monitor-box-card {
        width: 320px;
        height: 470px;
    }
</style>

<script>

    import {createDevice, getDevicesIndex, deleteDevice, editDevice} from '../../api/api';

    export default {
        data() {
            return {
                lightStatus: [],
                deviceLists: [],
                cardData: {},
                weekDay: [],
                beginTime: [],
                endTime: [],
                delayTime: [],
                from: {
                    name: '',
                    code: '',
                    value: 0,
                    type: 1,
                    status: 0,
                    description: '',
                },
                cardType: true, //true：新增 ， false：编辑
                devices: [],
            };
        },
        methods: {
            newCard() {
                this.from.name      = '暂无名称';
                this.from.code      = '0';
                this.from.value     = 85;
                this.from.type      = 2; // 2 为 采集设备
                this.from.status    = 0; // 0：关闭 1：开启 99：禁用
                this.from.description = '暂无描述';
                this.cardType       = true;
                this.addDevice();
            },
            updateCard(index) {
                this.from.id = this.cardData[index]['id'];
                this.from.name = this.cardData[index]['name'];
                this.from.code = this.cardData[index]['code'];
                this.from.value = this.cardData[index]['value'];
                this.from.status = this.lightStatus[index];
                this.from.deviceLists = this.deviceLists[index];
                this.from.begin_time = this.beginTime[index];
                this.from.end_time = this.endTime[index];
                this.from.delay_time = this.delayTime[index];
                this.from.description = this.cardData[index]['description'];
                this.cardType = false;
                this.addDevice();
            },
            getDevice() {
                var obj = new Object();
                obj.type = 2;
                getDevicesIndex(obj).then((res) => {
                    if (res.data.code == "OK") {
                        this.cardData = res.data.data;
                        this.devices = res.data.info;
                        res.data.data.map((_, index) => {
                            this.deviceLists[index] = (_['deviceLists'].length  == 0) ? [] : _['deviceLists'].map(_=>parseInt(_));
                            this.beginTime[index] =  _['begin_time'];
                            this.endTime[index] =  _['end_time'];
                            this.delayTime[index] =  _['delay_time'];

                            if (_['status']) {
                                this.lightStatus[index] = true;
                            } else {
                                this.lightStatus[index] = false;
                            }
                        });
                    }
                });
            },
            changeWitch(index) {
                this.updateCard(index);
            },
            addDevice() {
                if (this.cardType) {
                    createDevice(this.from).then((res) => {
                        if (res.data.code == "OK") {
                            this.$message({
                                message: res.data.msg,
                                type: 'success'
                            });
                            this.getDevice();
                        } else {
                            this.$message({
                                message: res.data.msg,
                                type: 'error'
                            });
                        }
                    });
                } else {
                    editDevice(this.from).then((res) => {
                        if (res.data.code == "OK") {
                            this.$message({
                                message: res.data.msg,
                                type: 'success'
                            });
                            this.getDevice();
                        } else {
                            this.$message({
                                message: res.data.msg,
                                type: 'error'
                            });
                        }
                    });
                }
            },
            delCard(device) {
                deleteDevice(device).then((res) => {
                    this.$confirm('确认删除这个设备吗？', '提示', {}).then(() => {
                        if (res.data.code == "OK") {
                            this.$message({
                                message: res.data.msg,
                                type: 'success'
                            });
                            this.getDevice();
                        } else {
                            this.$message({
                                message: res.data.msg,
                                type: 'error'
                            });
                        }
                    });
                });
            }
        },
        mounted() {
            this.getDevice();
        }
    }
</script>